<template>
  <footer>
    <div class="footer">
      <ul>
        <router-link to="/home/sonHome">
          <li>
            <img src="../assets/icon/首页.svg" alt="" />
            <p>首页</p>
          </li>
        </router-link>
        <router-link to="/home/sonResource">
          <li>
            <img src="../assets/icon/房源 (1).svg" alt="" />
            <p>房源</p>
          </li>
        </router-link>
        <router-link to="/home/sonMessage">
          <li>
            <img src="../assets/icon/消息.svg" alt="" />
            <p>楼市</p>
          </li>
        </router-link>
        <router-link to="/home/sonMy">
          <li>
            <img src="../assets/icon/我的.svg" alt="" />
            <p>我的</p>
          </li>
        </router-link>
      </ul>
    </div>

    <div><router-view /></div>
  </footer>
</template>
<script>
// 1.定义组件
export default {
  name: "navigation",
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.footer {
  z-index: 10000;
  position: fixed;
  bottom: -1px;
  left: 0;
  width: 100%;
  background-color: white;

  ul {
    width: 100%;
    font-size: 14px;
    li {
      // height: 25%;

      width: 25%;
      float: left;
      margin: 0 auto;
      text-align: center;
      img {
        width: 30px;
      }
      p {
        margin: 0;
      }
    }
  }
}
</style>